<html>
<wicket:extend>

<script>
$(function(){			

	// Slider for Air
	$('#sliderBright').slider({
		orientation: "horizontal",
		range: "min",
		min: 1,
		max: 100,
		value: 75,
		slide: function( event, ui ) {
			$( "#amountBright" ).html( ui.value );	
		}
	});
	$( "#amountBright" ).html( $( "#sliderBright" ).slider( "value" ) );
	
});

function toggleMode(y) {
	if(y == 0) {
		  document.getElementById("manual").setAttribute("class", "green-button");
		  document.getElementById("follow").setAttribute("class", "gray-button");	
	 	  document.getElementById("visual").setAttribute("class", "gray-button");	  
	  	  document.getElementById("strobe").setAttribute("class", "gray-button");
		  document.getElementById("room").removeAttribute("disabled"); 	  	    	  	  	  	    
	}
	else if(y == 1) {
		  document.getElementById("manual").setAttribute("class", "gray-button");
		  document.getElementById("follow").setAttribute("class", "green-button");	
		  document.getElementById("visual").setAttribute("class", "gray-button");	  
		  document.getElementById("strobe").setAttribute("class", "gray-button");	
		  document.getElementById("room").setAttribute("disabled", "true");  	  	    
	}
	else if(y == 2) {
		  document.getElementById("manual").setAttribute("class", "gray-button");
		  document.getElementById("follow").setAttribute("class", "gray-button");	
		  document.getElementById("visual").setAttribute("class", "green-button");	  
		  document.getElementById("strobe").setAttribute("class", "gray-button");
		  document.getElementById("room").removeAttribute("disabled"); 	  	  	    
	}
	else if(y == 3) {
		  document.getElementById("manual").setAttribute("class", "gray-button");
		  document.getElementById("follow").setAttribute("class", "gray-button");	
		  document.getElementById("visual").setAttribute("class", "gray-button");	  
		  document.getElementById("strobe").setAttribute("class", "green-button");
		  document.getElementById("room").removeAttribute("disabled"); 		  	  	    		  	    
	}		
}

function toggleOnOff(x) {
	if(x == 1) {
	  document.getElementById("on").setAttribute("class", "green-button");
	  document.getElementById("off").setAttribute("class", "gray-button");	  
	}
	else if(x == 0) {
	  document.getElementById("on").setAttribute("class", "gray-button");
	  document.getElementById("off").setAttribute("class", "green-button");	  
	}
}
</script>

<div class="top-links">
  <a class="icon-right" href="#" onClick="helpPopUp();return false;"><img wicket:id="help" /></a>
  <a class="icon-right" href="#" onClick="window.location.reload();return false;"><img wicket:id="refresh" /></a>
  <a class="icon-right" href="#" onClick="window.print();return false;"><img wicket:id="printer" /></a>
  <div class="clear"></div>
</div>

<h1>Lighting</h1>

<div class="column-two">
  <div class="inner">
    <div class="box">
      <h2>General Settings</h2>
      <div style="border-bottom: 1px solid #ccc; margin-bottom: 25px; padding-bottom: 55px;">
        <a id="manual" class="green-button" onClick="toggleMode(0);" style="cursor: pointer;">Manual</a> 
        <a id="follow" class="gray-button" onClick="toggleMode(1);" style="cursor: pointer;">Follow Me</a> 
        <a id="visual" class="gray-button" onClick="toggleMode(2);" style="cursor: pointer;">Visualizer</a>
        <a id="strobe" class="gray-button" onClick="toggleMode(3);" style="cursor: pointer;">Strobe</a>
      </div>
      <div class="clear"></div>
      <div class="column-three">
      	<h5 class="dark-purple">Room</h5>
        <div class="clear"></div>
        <select id="room">
          <option>All Rooms</option>
          <option>Bedroom</option>
          <option>Living Room</option>
          <option>Bath Room</option>
          <option>Kitchen</option>
          <option>Common Room</option>
        </select>
      </div>
      <div class="column-three">
     		<h5 class="dark-purple">Lights</h5>
        <div class="clear"></div>
        <a id="on" onClick="toggleOnOff(1);" class="green-button" style="cursor: pointer; float: center;">On</a>&nbsp;
        <a id="off" onClick="toggleOnOff(0);" class="gray-button" style="cursor: pointer; float: center;">Off</a>
      </div>
      <div class="column-three">
      	<h5 class="dark-purple">Brightness</h5>
        <div class="clear"></div>
        <table class="bare" style="width:100%;">
        	<tr>
          	<td style="width:100%;"><div id="sliderBright"></div></td>
            <td style="padding-left:10px !important;"><span id="amountBright">75</span>%</td>
          </tr>
        </table>
      </div>
      <div class="clear"></div>
      <h5 class="dark-purple" style="margin-top:20px;">Color</h5>
      <div id="icolor" class="icolorC"></div>
      <script type="text/javascript">
        $("#icolor").icolor({
        flat:true,
        onSelect:function(c){this.$tb.css("background-color",c);},
        showInput:false,
        title:false
        });
      </script>
      <div class="clear"></div>
    </div>

  </div>
</div>
      
<div class="column-two">
	<div class="inner">
    <div class="tab-wrapper" id="tabset-1">
      <ul class="tabs">
        <li class="tab-1"><a href="#">Day</a></li>
        <li class="tab-2"><a href="#">Week</a></li>
        <li class="tab-3"><a href="#">Month</a></li>
        <li class="tab-4"><a href="#">Year</a></li>
      </ul>
      <ul class="tab-content">
 				<li class="content-1">
        	<h5 class="left">Statistics (Day)</h5>
          <div class="right medium-large dark-purple">38.7 kWh/day</div>
          <div class="clear"></div>
          <p class="info" style="margin-top: 10px;">You are currently using <strong>38.7 kWh/day</strong> or roughly <strong>$10.01/day</strong>. Your average Daily Energy Usage is <strong>35.2  kWh/day</strong>.</p>
          <center><img wicket:id="lighting-graph" /></center>
        </li>
        <li class="content-2">
        	<h5 class="left">Statistics (Week)</h5>
          <div class="right medium-large dark-purple">270.9 kWh/week</div>
          <div class="clear"></div>
          <p class="info" style="margin-top: 10px;">You are currently using <strong>270.9 kWh/week</strong> or roughly <strong>$70.07/week</strong>. Your average Weekly Energy Usage is <strong>246.4  kWh/week</strong>.</p>
          <center><img wicket:id="lighting-graph" /></center>
        </li>
        <li class="content-3">
        	<h5 class="left">Statistics (Month)</h5>
          <div class="right medium-large dark-purple">1161 kWh/month</div>
          <div class="clear"></div>
          <p class="info" style="margin-top: 10px;">You are currently using <strong>1161 kWh/month</strong> or roughly <strong>$300.30/month</strong>. Your average Monthly Energy Usage is <strong>1056  kWh/month</strong>.</p>
          <center><img wicket:id="lighting-graph" /></center>
        </li>
        <li class="content-4">
        	<h5 class="left">Statistics (Year)</h5>
          <div class="right medium-large dark-purple">14125.5 kWh/year</div>
          <div class="clear"></div>
          <p class="info" style="margin-top: 10px;">You are currently using <strong>14125.5 kWh/year</strong> or roughly <strong>$3653.65/year</strong>. Your average Yearly Energy Usage is <strong>12848  kWh/year</strong>.</p>
          <center><img wicket:id="lighting-graph" /></center>
        </li>
      </ul>
      <div class="clear"></div>
    </div>


    <div class="box">
      <h2>Timer</h2>
      <form action="#" class="table-wrapper" method="get" name="tableform" style="margin:0;">
        <table cellpadding="0" cellspacing="0" class="sortable" width="100%" style="text-align:center !important;">
          <thead>
            <tr>
              <th>Enabled<a class="sort-desc" href="#">&nbsp;</a></th>
              <th>Day of Week<a class="sort-desc" href="#">&nbsp;</a></th>
              <th>Start<a class="sort-desc" href="#">&nbsp;</a></th>
              <th>Stop<a class="sort-desc" href="#">&nbsp;</a></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox" checked/></td>
              <td>Monday</td>
              <td><input type="text" class="text" id="time1" size="5" value="08:00" style="float:none !important;margin:0;" /></td>
              <td><input type="text" class="text" id="time2" size="5" value="09:00" style="float:none !important;margin:0;" /></td>        
            </tr>
            <tr>
              <td><input type="checkbox" /></td>
              <td>Tuesday</td>
              <td><input type="text" class="text" id="time3" size="5" value="08:00" style="float:none !important;margin:0;" /></td>
              <td><input type="text" class="text" id="time4" size="5" value="09:00" style="float:none !important;margin:0;" /></td>        
            </tr>
            <tr>
              <td><input type="checkbox" checked/></td>
              <td>Wednesday</td>
              <td><input type="text" class="text" id="time5" size="5" value="08:00" style="float:none !important;margin:0;" /></td>
              <td><input type="text" class="text" id="time6" size="5" value="09:00" style="float:none !important;margin:0;" /></td>        
            </tr>
             <tr>
              <td><input type="checkbox" /></td>
              <td>Thursday</td>
              <td><input type="text" class="text" id="time7" size="5" value="08:00" style="float:none !important;margin:0;" /></td>
              <td><input type="text" class="text" id="time8" size="5" value="09:00" style="float:none !important;margin:0;" /></td>        
            </tr>  
             <tr>
              <td><input type="checkbox" /></td>
              <td>Friday</td>
              <td><input type="text" class="text" id="time9" size="5" value="08:00" style="float:none !important;margin:0;" /></td>
              <td><input type="text" class="text" id="time10" size="5" value="09:00" style="float:none !important;margin:0;" /></td>        
            </tr>     
             <tr>
              <td><input type="checkbox" checked/></td>
              <td>Saturday</td>
              <td><input type="text" class="text" id="time11" size="5" value="08:00" style="float:none !important;margin:0;" /></td>
              <td><input type="text" class="text" id="time12" size="5" value="09:00" style="float:none !important;margin:0;" /></td>        
            </tr>    
             <tr>
              <td><input type="checkbox" checked/></td>
              <td>Sunday</td>
              <td><input type="text" class="text" id="time13" size="5" value="08:00" style="float:none !important;margin:0;" /></td>
              <td><input type="text" class="text" id="time14" size="5" value="09:00" style="float:none !important;margin:0;" /></td>        
            </tr>                        
          </tbody>
        </table>
        <div class="clear"></div>
      </form>
      <div class="clear"></div>
    </div>
  </div>
</div>

<script>
// Use default settings
for(i=1; i<15; i++) {
		$("#time"+i).timePicker(); 
}
</script>
  
</wicket:extend>
</html>

